<%@ page import="com.google.gson.Gson" %>
<%@ page import="com.qipay.admin.statement.vo.DataSetVo" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="org.apache.commons.lang3.StringUtils" %>
<%@ taglib prefix="page" uri="http://com.qipay/pagelib" %>
<%@ page language="java" contentType="text/html;charset=utf-8" %>
<!doctype html>
<html>
<head>
    <jsp:include page="head.jsp"></jsp:include>
    <link rel="stylesheet" href="<%= request.getAttribute("StaticHost") %>/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="<%= request.getAttribute("StaticHost") %>/css/bootstrap-datepicker3.min.css">
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <jsp:include page="nav.jsp"></jsp:include>
    <jsp:include page="left.jsp"></jsp:include>
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">利润报表</h3>
                        </div>
                        <div class="box-body" style="min-width: 900px; overflow: auto;">
                            <div style="width: 100%;">
                                <form class="form-inline">
                                    <div class="form-group date form_datetime">
                                        <label for="cpId">CP：</label>
                                        <select class="form-control" id="cpId" name="cpId" readonly>
                                            <%
                                                Map<Long, String> map = (Map<Long, String>) request.getAttribute("cpMap");
                                                Long cpId = (Long) request.getAttribute("cpId");
                                                String from = (String) request.getAttribute("from");
                                                String to = (String) request.getAttribute("to");
                                                for (Long key : map.keySet()) {
                                                    String value = map.get(key);
                                            %>
                                            <option value="<%=key%>" <% if (null != cpId && cpId.equals(key)) {%>
                                                    selected="selected"<%}%>>
                                                <%=value%>
                                            </option>
                                            <%}%>
                                        </select>

                                        <div class="form-group date form_datetime">
                                            <label for="from">开始日期：</label>
                                            <input type="text" class="form-control" id="from" name="from" readonly
                                                   value="<%= StringUtils.isNotBlank(from)? from: ""%>">
                                        </div>
                                        <div class="form-group date form_datetime">
                                            <label for="to">结束日期：</label>
                                            <input type="text" class="form-control" id="to" name="to" readonly
                                                   value="<%= StringUtils.isNotBlank(to)? to: ""%>">
                                        </div>
                                        <button type="submit" class="button  pull-right" id="btnSearch" style="font-size: 1rem;color: #778899;">查询</button>
                                </form>
                            </div>
                            <div style="width: 100%;">
                                <canvas id="chart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <jsp:include page="foot.jsp"></jsp:include>
</div>
<script src="<%= request.getAttribute("StaticHost") %>/js/adminlte.min.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/bootstrap-datepicker.min.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/Chart.bundle.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/Chart.utils.js"></script>

<script type="text/javascript">
    $(function () {

        $('#from, #to').datepicker({
            format: "yyyy-mm-dd",
            todayBtn: true,
            clearBtn: true,
            language: "zh-CN"
        });

        // init
        <%
        List<String> labels= (List<String>) request.getAttribute("labels");
        List<DataSetVo> data=(List<DataSetVo>) request.getAttribute("data");
        Gson gson= new Gson();
        %>
        var areaChartData = {
            labels: <%=gson.toJson(labels)%>,
            datasets: <%=gson.toJson(data)%>
        };
        var color = Chart.helpers.color;

        // init.color
        var colorNames = Object.keys(window.chartColors);
        for (var i = 0; i < areaChartData.datasets.length; i++) {
            dataset = areaChartData.datasets[i];
            var dsColor = window.chartColors[colorNames[i % colorNames.length]];
            dataset.backgroundColor = color(dsColor).alpha(0.5).rgbString();
            dataset.borderColor = dsColor;
        }

        // draw
        var ctx = document.getElementById("chart").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'horizontalBar',
            data: areaChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                    }
                },
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '点选色块过滤'
                }
            }
        });
    });
</script>
</body>
</html>

